<template>
  <section>
     <!-- 面包屑 -->
 <breadcrumbs></breadcrumbs>
    <!-- <btns @exec="exec"></btns> -->
    <div class="data-container scroll-table">
      <div>
        <div class="ind-title lh50 f16">消息中心</div>
      </div>
      
      <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item v-for="item in tableData" :key='item.messageId' :name='item.messageRecId'>
                <template slot="title">
                <i v-if="item.read==0" class="mgr-20">
                    <el-badge is-dot class="item">      
                   </el-badge>
                  </i> {{item.title}}
                </template>
                <div  v-html="item.content"></div>
            </el-collapse-item>
        </el-collapse>



      <!-- <el-collapse v-for="item in tableData" :key="item.messageId"  @change="yidu(item.messageRecId)">
        
          <el-collapse-item >
         
              <template slot="title" class="baoqi">
                {{item.title}} 
            <div v-if="item.read==0">
                <el-badge is-dot class="item">
                
            </el-badge>
            </div>
  
            </template>
       

              <div  v-html="item.content"></div>
         </el-collapse-item>
      </el-collapse> -->

    </div>
    <div class="pages">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

  </section>
</template>

<script>
import btns from "@/components/btns.vue";
import Editor from "@/components/edit";
import breadcrumbs from "@/components/breadcrumbs.vue";
export default {
  components: {
    btns,
    Editor,
    breadcrumbs,
  },
  data() {
    var FengValidate = (rule, value, callback) => {
      // console.log(this.addfile);
      if (this.addfile == "") {
        callback(new Error("请选择封面图片"));
      }
      // if (value == null || value == '') {
      //   this.activeNames = ['2'];
      // }
    };
    return {
      activeNames: ['1'],
      EditAddfile: "",
      createAddfile: "",
      hasFile: false,
      isShowGoodsListEdit: false,
      isShowProductListEdit: false,
      isShowFengEdit: false,
      isShowEditedit: false,
      EditForm: {},
      dialogEditFormVisible: false,
      isShowGoodsList: false,
      isShowProductList: false,
      isShowFeng: false,
      ProductList: [],
      GoodsList: [],
      isShow: false,
      Adaddfile: "",
      searchForm: { name: "" },
      tableData: [],
      currentPage: 1,
      pageSize: 5,
      total: 0,
      dialogCreateFormVisible: false,
      createForm: {},
      formLabelWidth: "120px",
      addfile: "",
      importFileUrl: this.GLOBAL.imgBaseUrl,
      isShowEdit: false,
   
    };
  },
  created() {
    this.getList(this.currentPage, this.pageSize);
    // this.getGoodsList();
    // this.getProductList();
  },
  methods: {
     handleChange(val) {
        console.log(val);
        if(val[1]){
            this.yidu(val[1])
        }
    },
    yidu(id){
          console.log("id====="+id)


    this.$api.banner
        .yiduxiaoxi({
          messageRecIds: id
         
        })
        .then((d) => {
          if (d.code == 200) {
            this.getList(this.currentPage, this.pageSize);
            console.log("消息已读成功")
     
          }
        });
          

      },
   
    getList(curr, page) {
      this.$api.banner
        .xiaoxilibiao({
          current: curr,
          size: page,
        })
        .then((d) => {
          if (d.code == 200) {
            this.tableData = d.data;
            this.total = d.totalCount;
     
          }
        });
      }
    },
   
};
</script>

<style lang="scss" scoped>
.dialog-footer {
  margin-top: 50px;
}
.img-feng {
  width: 120px;
  height: 120px;
}
.goods {
  width: 500px;
}
.icon {
  display: flex;
  justify-content: space-between;
  i {
    font-size: 25px;
  }
}
.baoqi {
   display: flex;
  justify-content: flex-end;
    
}
.juyou {
   
}
.tiaozhegn {
  display: flex;
  justify-content: space-between;
}
</style>
